<template>
  <div class="container">
    <img class="headerImg" src="../images/首页banner.jpg"/>
    <img class="saomaImg" @click="onScanningClick" src="../images/icon-saoma.svg"/>
    <div id="reader" style="width: 100%; height: 100%;"></div>
    <div class="search-container">
      <input v-model="antiFakeCode" @keyup.enter="onSearchClick" id="search-input" placeholder="请输入防伪码">
      <img @click="onSearchClick" class="search-icon" src="../images/icon-sousuo.svg"/>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import api from "../api/index.js";
import router from '../router/index.js'
import {useMainStore} from '../store/index.js';
import {Dialog} from 'vant';

const store = useMainStore();
const antiFakeCode = ref('')
const onSearchClick = async () => {
  if (antiFakeCode.value === '') {
    Dialog.alert({
      message: `请输入防伪码`,
    }).then(() => {
    });
  } else {
    loadData(antiFakeCode.value)
  }
}

const onScanningClick = async () => {
  wx.scanQRCode({
    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    success: function (res) {
      loadData(res.resultStr)
    }
  });
}
const loadData = async (props) => {
  const url = `/ruikeli/user/getProductDetail`
  const {data, err} = await api.get(url, {antiFakeCode: props})
  if (err) {
    Dialog.alert({
      message: err,
    }).then(() => {
    });
  } else {
    store.changeCount(props)
    router.push({path: `/detail`})
  }
}

onMounted(async () => {
  const url = `/ruikeli/user/ouath/url`
  const {err, data} = await api.get(url, {
    url: window.location.href.split('#')[0]
  })
  // console.log("当前页面的地址", ('http://anti-fake.ruikeli.net/#/').split('#')[0])
  if (err) {
    Dialog.alert({
      message: err,
    }).then(() => {
    });
  }
  wx.config({
    debug: false, // 开启调试模式
    appId: data.appid, // 必填，公众号的唯一标识
    timestamp: data.timestamp, // 必填，生成签名的时间戳
    nonceStr: data.nonceStr, // 必填，生成签名的随机串
    signature: data.signature,// 必填，签名要
    jsApiList: ['scanQRCode'] // 必填，需使用的JS接口列表
  });
})
</script>

<style scoped>
:deep(.van-dialog__message) {
  color: white !important;
}

.van-dialog__message {
  color: white !important;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;

  .headerImg {
    width: 100%;
    height: 680px;
  }

  .saomaImg {
    width: 230px;
    height: 230px;
    position: absolute;
    top: 924px;
  }

  .search-container {
    position: absolute;
    top: 636px;
    width: 630px;
    height: 88px;
  }

  #search-input {
    width: 100%;
    height: 88px;
    padding: 10px 95px 10px 35px;
    border: 1px solid #6EEBD8;
    border-radius: 44px;
    box-sizing: border-box;
    outline: none;
    background: white;
    transition: border-color 0.3s;
  }

  #search-input:focus {
    border-color: #007bff;
  }

  #search-input:focus + .placeholder,
  #search-input:not(:placeholder-shown) + .placeholder {
    top: 5px;
    left: 2px;
    opacity: 0.5;
  }

  .search-icon {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
  }
}
</style>